<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>点评</title>
    <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css"/>
    <style>

        /* 头部样式 */
        #firstHeader {
            background-color: #FF8400;
        }

        .topbar { /*background: #FF8400;*/
            height: 50px;
            border-bottom: 1px solid #DDDFE3;
        }

        .topbar_title {
            display: inline-block;
            font-size: 20px;
            line-height: 50px;
            padding-left: 12px;
        }

        .hr01, .hr02 {
            height: 28px;
        }

        .headerico {
            padding: 11px 15px 11px 15px;
        }

        .headericohover {
            background: #DADDE0;
        }

        .fr {
            float: right;
        }

        .fl {
            float: left;
        }

        /*第一头部*/
        #logo {
            padding: 11px 0 0 10px;
            height: 28px;
        }

        #citylist {
            height: 50px;
            line-height: 50px;
            padding-left: 15px;
            font-size: 18px;
            color: #fff;
        }

        .citylistarrow {
            vertical-align: top;
            width: 20px;
            padding-top: 15px;
        }

        .search {
            height: 34px;
            line-height: 34px;
            padding-left: 10px;
            border-radius: 30px;
            margin-top: 8px;
            position: absolute;
            left: 20px;
            right: 60px;
            font-size: 14px;
        }

        .search img {
            vertical-align: top;
            width: 20px;
            padding-top: 7px;
            padding-right: 10px;
        }

        .firstSearch {
            left: 90px;
            right: 60px;
            background-color: #FA6604;
            color: #FDC29B;
        }

        /* 第二头部 */
        #topbar_refresh {
            width: 40px;
            padding: 5px 10px;
        }

        .whitebar {
            background-color: #fcfcfc;
        }

        #whitecity {
            height: 50px;
            line-height: 50px;
            padding-left: 15px;
            font-size: 18px;
            color: #FF8400;
        }

        .secCitylistarrow {
            vertical-align: top;
            width: 15px;
            padding-top: 18px;
            padding-left: 5px;
        }

        .secSearch {
            left: 90px;
            right: 15px;
            background-color: #E8E8E8;
            color: #999;
        }

        /* 第三头部 */
        .swipepic {
            padding: 5px 15px 2px 15px;
            height: 23px;
        }

        .swipe div {
            font-size: 12px;
            text-align: center;
            color: #999;
        }

        .thrSearch {
            left: 15px;
            right: 60px;
            background-color: #E8E8E8;
            color: #999;
        }

        .bubble {
            margin-right: 10px;
            margin-bottom: 5px;
            border: 2px solid orange;
            border-radius: 8px;
            padding: 4px 8px 4px 8px;
        }

        /* 头部切换样式 */
        .titlebar {
            display: none;
        }

        .activebar {
            display: block;
        }

        /* 底部切换按钮样式 */
        ul {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        #footer {
            height: 61px;
            line-height: 60px;
            background-color: #FAFAFA;
            border-top: 1px solid #FAFAFA;
        }

        #footer li {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 60px;
        }

        /* 选项卡样式 */
        .scrollbar {
            display: -webkit-box;
            display: -webkit-flex;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: #EBECF0;
            font-size: 12px;
            position: relative;
        }

        .col1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            color: #909090;
        }

        .indexbar {
            position: absolute; /*background: #0fc;*/
            width: 50%;
            height: 5px;
            left: 0px;
            bottom: 0px;
            -webkit-transition: 300ms;
        }

        .redbox {
            background: #DB4646;
            width: 40px;
            height: 5px;
            position: relative;
            left: auto;
            right: auto;
            margin-left: auto;
            margin-right: auto;
        }

        /********************/
        /* 底部按钮原始样式 */
        /********************/
        .bbtn01 {
            background: url(./image/main_index_home_normal.png) no-repeat center 4px;
        }

        .bbtn02 {
            background: url(./image/main_index_tuan_normal.png) no-repeat center 4px;
        }

        .bbtn03 {
            background: url(./image/main_index_search_normal.png) no-repeat center 4px;
        }

        .bbtn04 {
            background: url(./image/main_index_my_normal.png) no-repeat center 4px;
        }

        .bottom_btn {
            width: 99%;
            height: 43px;
            padding-top: 18px;
            background-position-y: 4px;
            background-size: 30px;
            font-size: 12px;
            color: #A5A5A5;
        }

        /* 底部按钮激活样式 */
        .activebtn0 {
            background: url(./image/main_index_home_pressed.png) no-repeat center 4px;
        }

        .activebtn1 {
            background: url(./image/main_index_tuan_pressed.png) no-repeat center 4px;
        }

        .activebtn2 {
            background: url(./image/main_index_search_pressed.png) no-repeat center 4px;
        }

        .activebtn3 {
            background: url(./image/main_index_my_pressed.png) no-repeat center 4px;
        }

        .activebtn {
            color: #FF7419;
            background-size: 30px;
        }

        .bottomhover {
            background-color: #46494B;
        }

        /* 本地刷新图标 */
        #localrefresh {
            display: none;
            float: right;
            width: 40px;
            padding: 5px 10px;
        }

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #E1E1E1;
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #E1E1E1;
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #E1E1E1;
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #E1E1E1;
        }

        .h80 {
            height: 80px;
        }

        .h40 {
            height: 40px;
        }

        .h20 {
            height: 20px;
        }

        .h10 {
            height: 10px;
            background: #f0f0f0;
        }

        .h1 {
            height: 1px;
            margin-left: 15px;
            background: #f0f0f0;
        }

        .fr {
            float: right;
        }

        .fl {
            float: left;
        }

        .hightitem {
            background-color: #fff;
        }

        /* 抢购样式 */
        .snapup {
            height: 80px;
        }

        .snapup .infologo {
            height: 60px;
            margin: 10px;
        }

        .snapup .shelf2 {
            display: table;
            height: inherit;
            margin-left: 10px;
        }

        .snapup .shelfcell {
            display: table-cell;
            vertical-align: middle;
        }

        .snapup .shelfcell .title {
            margin-bottom: 10px;
        }

        .snapup .arrow {
            width: 20px;
            padding-top: 30px;
            padding-right: 10px;
        }

        /* 2X2样式 */
        .row {
            display: -webkit-box;
            display: -webkit-flex;
        }

        .col {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            position: relative;
        }

        .col img {
            position: absolute;
            right: 0;
            width: 80px;
            top: 0;
        }

        .col .matrixcell {
            display: table-cell;
            vertical-align: middle;
            padding-left: 10px;
        }

        .col .matrixcell .title {
            margin-bottom: 10px;
        }

        .matrix {
            display: table;
            height: inherit;
        }

        /* 猜你喜欢 */
        .guesstitle {
            height: auto;
            line-height: 20px;
            padding-left: 10px;
            vertical-align: top;
            font-size: 12px;
            color: #999;
        }

        .guesstitle img {
            height: 15px;
            padding-top: 12px;
            padding-left: 10px;
        }

        .home-tuan-list .item {
            position: relative;
            display: block;
            padding-left: 10px;
            border-bottom: 1px solid #e0e0e0;
        }

        .home-tuan-list .cnt {
            padding: 7px 10px 10px 0;
            display: box;
            display: -webkit-box;
            min-height: 78px;
            background-size: auto 1px;
        }

        .home-tuan-list .pic {
            margin-right: 10px;
            background: center;
        }

        .home-tuan-list img {
            width: 90px;
            height: 66px;
            margin-top: 7px;
            margin-bottom: 5px;
            border-radius: 3px;
        }

        .home-tuan-list .wrap {
            -webkit-box-flex: 1;
        }

        .home-tuan-list .wrap2 {
            display: table;
            height: 88px;
            width: 100%;
        }

        .home-tuan-list .content {
            -webkit-box-flex: 1;
            box-flex: 1;
            display: table-cell;
            vertical-align: middle;
        }

        .home-tuan-list .shopname {
            color: #333; /*line-height: 16px;*/
            font-size: 17px;
            max-width: 15em;
            white-space: nowrap;
            word-wrap: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            min-height: 10px;
            padding-bottom: 2px;
            padding-top: 3px;
            display: inline-block;
        }

        .home-tuan-list .title {
            color: #666;
            line-height: 16px;
            font-size: 13px;
            max-height: 30px;
            overflow: hidden;
            padding-top: 3px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .home-tuan-list .hot-title {
            margin-bottom: 8px;
        }

        .home-tuan-list .hot-subtitle {
            margin-bottom: 9px;
        }

        .home-tuan-list .info {
            margin-top: 9px; /*margin-bottom: 11px;*/
            color: #666;
            font-size: 12px;
            position: relative;
            line-height: 15px;
            display: box;
            display: -webkit-box;
            height: 15px;
        }

        .home-tuan-list .symbol {
            font-size: 14px;
            color: #f60;
            display: block;
            margin-top: 1px;
        }

        .home-tuan-list .price {
            color: #f60;
            font-size: 20px;
            line-height: 15px;
            margin-right: 5px;
            margin-top: 1px;
        }

        .home-tuan-list .o-price {
            color: #999;
            margin-top: 5px;
            line-height: 10px;
        }

        .home-tuan-list .sale {
            color: #f63;
            border: solid 1px #ff916e;
            padding: 3px 2px 2px;
            font-size: 10px;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            margin-left: 5px;
            line-height: 10px;
            height: 10px;
        }

        .home-tuan-list .distance {
            -webkit-box-flex: 1;
            box-flex: 1;
            -ms-box-flex: 1;
            -ms-flex: 1;
            text-align: right;
            line-height: 10px;
            margin-top: 5px;
            color: #999;
            float: right;
            font-size: 12px;
        }

        .home-tuan-list .price, .index-rec .home-tuan-list .o-price, .index-rec .home-tuan-list .distance, .index-rec .home-tuan-list .sale {
            display: block;
            line-height: 15px;
            font-size: 12px;
        }

        .Fix:after {
            display: block;
            content: '';
            height: 0;
            clear: both;
        }

        /* 3. */
        .section03 .col img {
            width: 60px;
            top: 10px;
        }

        .section03 .title01 .title {
            color: #965037;
        }

        .section03 .title02 .title {
            color: #ffa001;
        }

        .section03 .title03 .title {
            color: #ff558c;
        }

        .section03 .title04 .title {
            color: #19b4ff;
        }

        .section03 .matrixcell .info {
            color: #666;
        }

        /* 2. */
        .section02 .shelfcell .title span {
            color: #ff6633;
        }

        .section02 .shelfcell .subtitel {
            color: #666;
            font-size: 14px;
        }

        .swiper-container {
            background-color: #fff;
        }

        /* 1. */
        .section01 .row {
            margin-top: 10px;
        }

        .section01 .col {
            text-align: center;
        }

        .section01 .col img {
            position: relative;
            width: 60%;
        }

        .section01 .col div {
            font-size: 13px;
            margin-top: 5px;
        }

        .presshover {
            background-color: #FAFAFA;
        }

        .brb {
            border-bottom: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
        }

        .bb {
            border-bottom: 1px solid #e0e0e0;
        }

        .br {
            border-right: 1px solid #e0e0e0;
        }


        .swipe {
            overflow: hidden;
            visibility: hidden;
            position: relative;
            background: #fff;
            padding-bottom: 10px;
        }

        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }

        .swipe-wrap .swipe-box {
            float: left;
            width: 100%;
            position: relative;
        }

        .sliderow {
            text-align: center;
            width: 100%;
            display: block;
        }

        /*.slidepanel .sliderow {margin-top: 10px;}*/
        .sliderow .slidecol {
            float: left;
            width: 25%;
        }

        .sliderow .slidecol img {
            width: 60%;
            margin-top: 10px;
        }

        .sliderow .slidecol div {
            font-size: 13px;
            margin-top: 5px;
        }


    </style>
</head>
<body>
<div id="wrap">

    <div id="firstHeader" class="titlebar activebar">
        <div class="topbar">
            <div class="citylist fl" id="citylist" tapmode=""><img src="./image/title_home_arrow_down_normal.png"
                                                                     alt="" class="citylistarrow"></div>
            <!--插入表单插件-->
            <!--收索框-->
            <input type="text" class="search firstSearch" placeholder="输入门店名称" name="keyword" id="keyword">
            <!--隐藏域: 存储经纬度-->
            <input type="hidden" id="longitude">
            <input type="hidden" id="latitude">

            <span id="rightTitle" style="font-size:16px;color:white;float:right;padding-top:12px;">登录</span>
        </div>
    </div>


    <div id="main" style="padding:0px;width:100%;height:100%;border:0px;">
        <!-- 1. 头部swipe -->
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-box">
                    <div class="sliderow" id="slideRow1">
                    </div>
                    <div class="sliderow" id="slideRow2">
                    </div>
                </div>
            </div>
        </div>

        <!--展示数据-->
        <div class="guesstitle" id="guess">猜你喜欢</div>
        <!--门店展示的容器-->
        <div class="home-tuan-list" id="tuanList">

        </div>

        <!--搜索结果展示-->
        <div class="guesstitle" id="searchTitle" style="font-size:14px;">
            <p id="resTitle" >搜索结果</p>
            <div id="extraPadding" style="display:block;">
                <p>分类过滤</p>
                <div id="categoryFilter" style="margin-bottom:10px;"></div>
                <p>排序规则</p>
                <div id="priceFilter" style="margin-bottom:10px;"></div>
                <p>标签筛选</p>
                <div id="tagsFilter" style="margin-bottom:10px;"></div>
            </div>
        </div>
        <div class="home-tuan-list" id="searchList">

        </div>

    </div>


    <div id="footer">
        <ul>
            <li tapmode="activebtn0 activebtn">
                <a class="bottom_btn bbtn01 weixin activebtn activebtn0" href="/static/index.html">首页</a>
            </li>

            <li tapmode="activebtn1 activebtn">
                <a class="bottom_btn bbtn02 communicate">团购</a>
            </li>

            <li tapmode="activebtn2 activebtn">
                <a class="bottom_btn bbtn03 discover">发现</a>
            </li>

            <li tapmode="activebtn3 activebtn">
                <a class="bottom_btn bbtn04 home">我的</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/script/api.js"></script>
<script type="text/javascript" src="/static/script/swipe.js"></script>
<script type="text/javascript" src="/static/script/jquery.min.js"></script>
<script type="text/javascript" src="/static/script/bootstrap.js"></script>
<!--引入百度地图的脚本-->
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=vLptjcC35IrtTZvcehMT1L8lKgP4Xvzq"></script>>

<script type="text/javascript">
    let citylist = document.querySelector("#citylist");
    let longitudeInput = document.querySelector("#longitude");
    let latitudeInput = document.querySelector("#latitude");
    let tuanListDiv = document.querySelector("#tuanList");
    //关键字的文本框
    let keywordInput = document.querySelector("#keyword");
    //展示搜索页的容器
    let searchListDiv = document.querySelector("#searchList");
    let sliderDiv = document.querySelector("#slider");
    let guessDiv = document.querySelector("#guess");

    //分类过滤
    let categoryFilterDiv = document.querySelector("#categoryFilter");
    let tagsFilterDiv = document.querySelector("#tagsFilter");

    //绑定回车事件(监听按键事件)
    keywordInput.addEventListener("keypress",(event)=>{
        if(event.keyCode ===13){//13为回车键
            //执行查询
            searchFunction();
        }
    })
    //声明查询的条件
    let g_categoryFilter = null;
    let g_orderby = null;
    let g_tags=null;

    let searchFunction = function(){
        let longitude = longitudeInput.value;
        let latitude = latitudeInput.value;
        let keyword = keywordInput.value;
        let regex="/^\\s*$";
        if(regex.match(keyword)){
            alert("关键字不能为空! ");
            return false;
        }
        if (regex.match(longitude) || regex.match(latitude)){
            alert("地址信息还未获取! ");
            return false;
        }
        //对自定义的过滤条件进行处理
        let categoryQueryString='';
        let orderbyQueryString='';
        let tagsQueryString='';

        if (g_tags == null){
            tagsQueryString = '';
        }else {
            tagsQueryString = `&tags=${g_tags}`;
        }

        if (g_categoryFilter == null){
            categoryQueryString='';
        }else {
            categoryQueryString=`&categoryId=${g_categoryFilter}`;
        }
        if (g_orderby == null){
            orderbyQueryString='';
        }else{
            orderbyQueryString=`&orderby=${g_orderby}`;
        }

        let url =`/shop/search?longitude=${longitude}&latitude=${latitude}&keyword=${keyword}${categoryQueryString}${orderbyQueryString}${tagsQueryString}`;
        fetch(url).then(response=>response.json()).then(data=>{
            if(!data.success){
                return;
            }
            //原本的数据隐藏
            tuanListDiv.style.display = "none";
            sliderDiv.style.display = "none";
            guessDiv.style.display = "none";
            searchListDiv.style.disable = "block";
            //获得数据
            let dataList = data.data.List;
            searchListDiv.innerHTML='';
            for (let i=0;i<dataList.length;i++){
                let distance= dataList[i].distance;
                let distanceStr="0m";
                if (distance>=1000){
                    distanceStr= getFloat(distance/1000,1)+"km";
                }else {
                    distanceStr= distance+"m";
                }
                let content =`<a href="" class="item Fix hightitem">
                                                    <div class="cnt">
                                                    <img class="pic" src="${dataList[i].iconUrl}"/>
                                                    <div class="wrap">
                                                    <div class="wrap2">
                                                    <div class="content">
                                                    <div class="shopname">${dataList[i].name}</div><span class="distance">${distanceStr}</span>
                                                    <div class="title">${dataList[i].tags}</div>
                                                    <div class="info">
                                                    <span class="symbol">¥</span>
                                                    <span class="price">${dataList[i].pricePerMan}</span></div> </div> </div> </div> </div></a>`;
                searchListDiv.insertAdjacentHTML("beforeend",content);


                }

            //定义分类的信息
            let categoryList = data.data.categoryList;
            let categoryTag = `<span class="bubble" data-id="${0}" onclick="appendCategory(this)" id="category${0}">全部</span>`;
            categoryFilterDiv.innerHTML='';//清除数据
            categoryFilterDiv.insertAdjacentHTML("beforeend",categoryTag);
            for(let i=0;i<categoryList.length;i++){
                categoryTag=`<span class="bubble" data-id="${categoryList[i].id}" onclick="appendCategory(this)" id="category${categoryList[i].id}">${categoryList[i].name}</span>`;
                categoryFilterDiv.insertAdjacentHTML("beforeend",categoryTag);
            }

            //定义标签信息
            tagsFilterDiv.innerHTML='';
            let tagsList = data.data.tags;
            let tagsTag = `<span class="bubble" data-id="${0}" onclick="appendTags(this)" id="category${0}">全部</span>`;
            tagsFilterDiv.insertAdjacentHTML("beforeend",tagsTag);
            for (let i=0;i<tagsList.length;i++){
                tagsTag=`<span class="bubble" data-id="${tagsList[i].tags}" onclick="appendTags(this)" id="tags${tagsList[i].tags}">${tagsList[i].tags}(${tagsList[i].num})</span>`;
                tagsFilterDiv.insertAdjacentHTML("beforeend",tagsTag);
            }

        })
    }

    let appendTags=function(obj){
        let tags=obj.dataset.id;
        if (tags==0){
            g_tags=null;
        }else {
            g_tags=tags;
        }
        searchFunction();
    }

    //分类过滤的函数
    let appendCategory = function(obj){
        //获得data-id的值
        let id = obj.dataset.id;
        if(id==0){
            g_categoryFilter = null;
        }else{
            g_categoryFilter = id;
        }
        searchFunction();

    }

    //保留小数点指定的位数
    let getFloat = function (number, n) {
        n = n ? parseInt(n) : 0;
        if (n <= 0) return Math.round(number);
        number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
        return number;
    };

    jQuery(document).ready(function () {
        $("#rightTitle").on("click", function () {
            window.location.href = "/static/login.html";
        });

        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            console.log(r);
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                let city=r.address.city;
                latitudeInput.value=r.point.lat;
                longitudeInput.value=r.point.lng;
                citylist.innerHTML=city;
                let url = `/shop/recommend?longitude=${r.point.lng}&latitude=${r.point.lat}`;
                //发送异步请求
                fetch(url).then(response=>response.json()).then(data=>{
                    console.log(data);
                    if(data.success){
                        let dataList=data.data.List;
                        for(let i=0;i<dataList.length;i++){
                            let distance= dataList[i].distance;
                            let distanceStr="0m";
                            if (distance>=1000){
                                distanceStr= getFloat(distance/1000,1)+"km";
                            }else {
                                distanceStr= distance+"m";
                            }
                            let content =`<a href="" class="item Fix hightitem">
                                                    <div class="cnt">
                                                    <img class="pic" src="${dataList[i].iconUrl}"/>
                                                    <div class="wrap">
                                                    <div class="wrap2">
                                                    <div class="content">
                                                    <div class="shopname">${dataList[i].name}</div><span class="distance">${distanceStr}</span>
                                                    <div class="title">${dataList[i].tags}</div>
                                                    <div class="info">
                                                    <span class="symbol">¥</span>
                                                    <span class="price">${dataList[i].pricePerMan}</span></div> </div> </div> </div> </div></a>`;
                                    tuanListDiv.insertAdjacentHTML("beforeend",content);
                        }
                    }
                })
            }
        });

    });

    let rightTitle = document.querySelector("#rightTitle");

    //加载页面后, 向后台发送请求, 查收session中是否存在数据
    fetch('/user/getCurrentUser', {
        method: 'POST',
        headers: {
            "Content-type": "application/json;charset=utf-8"
        }
    }).then(response => response.json()).then(data => {
        if (data.data.user == null) {
            //说明没有进行登录
            rightTitle.innerHTML = "登录"

        } else {
            //将登录修改为注销
            rightTitle.innerHTML = "注销"

        }
    }).catch(e => alert("网路异常"))


    let sliderRow1 = document.querySelector("#slideRow1");
    let sliderRow2 = document.querySelector("#slideRow2");

    //发送异步请求
    fetch('/category/list').then(response=>response.json()).then(data=>{
        //处理响应数据
        let dataList = data.data.list;
        for(let i=0;i<dataList.length;i++){
            let content=`<div class="slidecol">
                              <img src="${dataList[i].iconUrl}">
                              <div class="">${dataList[i].name}</div>
                          </div>`;

            //将字符串转成node节点
            let node = document.createRange().createContextualFragment(content);
            if(i<=3){
                sliderRow1.append(node);
            }else {
                sliderRow2.append(node);
            }

        }
    }).catch(e =>alert(e));


    window.onload = function() {
        var slider =
            Swipe(document.getElementById('slider'), {
                auto: 1000000,
                continuous: true,
                callback: function (pos) {
                }
            });
    }

</script>
</html>